<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>FX Test</title>
<script type="text/javascript" src="../liwe.js"></script>
<script type="text/javascript" src="../utils.js"></script>
<script type="text/javascript" src="../object_enh.js"></script>
<script type="text/javascript" src="../array_enh.js"></script>
<script type="text/javascript" src="../string_enh.js"></script>
<script type="text/javascript" src="../fx.js"></script>
<script type="text/javascript" src="../fx/fade.js"></script>
<script type="text/javascript" src="../fx/resize.js"></script>
<script type="text/javascript" src="../fx/slowfade.js"></script>

<script type="text/javascript">
function init ()
{
	liwe.fx.slowfade.install ( $( "test_slow" ) );
}

function do_fade_in ()
{
	liwe.fx.fade_in ( $( "test_fade_in" ), 10, 100, function () { console.debug ( "DONE!" ); } );
}

function do_fade_out ()
{
	liwe.fx.fade_out ( $( "test_fade_in" ), 10, 0, function () { console.debug ( "DONE!" ); } );
}

function do_resize ()
{
	liwe.fx.resize.start ( $( "test_fade_in" ), 200, 200, function () { console.debug ( "DONE!!" ); } );
}

function do_resize2 ()
{
	liwe.fx.resize.start ( $( "test_fade_in" ), 50, 50, function () { console.debug ( "DONE!!" ); } );
}

function do_mix ()
{
	var el = $( "test_fade_in" );

	liwe.fx.fade_in ( el, 10, 100 );
	liwe.fx.resize.start ( el, 200, 200 );
}
</script>
</head> 
<body onload="init()">

<div id="test_fade_in" style="background-color: red; width: 100px; height: 100px;"></div>
<div id="test_slow" style="background-color: red; width: 100px; height: 100px;"></div>

<a href="javascript:do_fade_in()">Fade In</a>
<a href="javascript:do_fade_out()">Fade Out</a>

<a href="javascript:do_resize()">Size UP</a>
<a href="javascript:do_resize2()">Size Down</a>
<a href="javascript:do_mix()">Mix!!</a>


</body>
</html>
